<template>
  <div class="experienceDetail">
    <!-- 导航 -->
    <van-nav-bar
      class="title"
      title="面经详情"
      left-arrow
      @click-left="$router.back()"
      :fixed="true"
    />
    <!-- 内容 -->
    <div class="main" v-if="art">
      <!-- 标题 -->
      <div class="arttitle">{{ art.title }}</div>
      <div class="userInfo">
        <img :src="baseUrl + art.author.avatar" />
        <div class="name">{{ art.author.nickname }}</div>
        <div class="time">{{ art.created_at | dateStyleOne }}</div>
      </div>
      <div class="data" v-html="art.content"></div>
      <div class="comments">
        <div class="commentTitle">
          评论 <sup>{{ num }}</sup>
        </div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- v-for="item in list" :key="item" :title="item" -->
          <van-cell v-for="(item, index) in artComments" :key="index">
            <mycomment
              @change="change"
              :data="item"
              :isLike="starComments.includes(item.id)"
            ></mycomment>
          </van-cell>
        </van-list>
      </div>
    </div>
    <!-- 操作模块 -->
    <div class="operation">
      <div class="btn" @click="onArt()">我来补充两句</div>
      <div class="box" @click="artCollect" :class="{ red: iscolle }">
        <i class="iconfont iconbtn_shoucang_nor"></i>
        {{ art ? art.collect : 0 }}
      </div>
      <div class="box" :class="{ red: islike }" @click="artLike">
        <i class="iconfont iconbtn_dianzan_small_nor"></i>
        {{ art ? art.star : 0 }}
      </div>
      <div class="box" @click="$refs.share.show = true">
        <i class="iconfont iconbtn_share"></i>
        {{ art ? art.share : 0 }}
      </div>
    </div>
    <!-- 评论弹出框 -->
    <myreply ref="reply"></myreply>
    <!-- 分享评论框 -->
    <myshare ref="share" :art="art"></myshare>
  </div>
</template>

<script>
import { setLocal } from '@/utils/local.js'
// 导入接口
import {
  apiExperienceParticulars,
  apiExperienceComments,
  apiExperienceCollect,
  apiExperienceStar
} from '@/api/find.js'
export default {
  components: {
    mycomment: () => import('./coms/comment.vue'),
    myreply: () => import('./coms/reply.vue'),
    myshare: () => import('./coms/share.vue')
  },
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL,
      id: this.$route.params.id,
      art: null, // 文章数据
      num: 0, // 评论数量
      artComments: [], // 文章评论
      start: 0, // 索引
      limit: 5, // 数据量
      // 上拉刷新刷新
      loading: false,
      finished: false,
      // 状态
      starArticles: [], // 用户点赞文章列表
      collectArticles: [], // 收藏文章列表
      starComments: [], // 点赞评论列表
      iscolle: true,
      islike: false
    }
  },
  async mounted () {
    // 加载效果
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true
    })
    // 文章
    const res = await apiExperienceParticulars(this.id)
    this.art = res.data
    // console.log(this.art)
    const userInfo = this.$store.state.userInfo
    const id = this.id - 0
    // 获取用户点赞列表
    if (userInfo.starArticles) {
      this.starArticles = userInfo.starArticles
      this.islike = userInfo.starArticles.includes(id)
    }
    // 获取用户收藏文章列表
    if (userInfo.collectArticles) {
      this.collectArticles = userInfo.collectArticles
      this.iscolle = this.collectArticles.includes(id)
    }
    // 获取评论点赞列表
    if (userInfo.starComments) {
      this.starComments = userInfo.starComments
      // this.islike = this.starComments.includes(this.id)
    }
  },
  methods: {
    change (value) {
      this.starComments = value
    },
    async onLoad () {
      // 请求评论数据
      const res = await apiExperienceComments({
        start: this.start,
        limit: this.limit,
        id: this.id
      })
      // console.log(res.data)
      this.num = res.data.total
      // 保存数据
      this.artComments = [...this.artComments, ...res.data.list]
      // 停止加载
      this.loading = false
      // 索引更新
      this.start++
      // 终点判断
      if (res.data.list.length < this.limit) {
        this.finished = true
      }
    },
    onArt () {
      this.$refs.reply.type = 'art'
      this.$refs.reply.show = true
      this.$refs.reply.data = this.artComments
    },
    // 收藏
    async artCollect () {
      const res = await apiExperienceCollect(this.id)
      this.collectArticles = res.data.list
      this.art.collect = res.data.num
      this.iscolle = !this.iscolle
      // 保存信息
      // 获取用户收藏列表
      const obj = this.$store.state.userInfo
      obj.collectArticles = this.collectArticles
      setLocal(obj, 'userInfo') // 保存到本地
    },
    // 文章点赞
    async artLike () {
      const res = await apiExperienceStar(this.id)
      this.starArticles = res.data.list
      this.art.star = res.data.num
      this.islike = !this.islike
      // 保存信息
      // 获取用户点赞列表
      const obj = this.$store.state.userInfo
      obj.starArticles = this.starArticles
      setLocal(obj, 'userInfo') // 保存到本地
    }
  }
}
</script>

<style lang="less" scoped>
.experienceDetail {
  margin-top: 46px;
  .red {
    color: red !important;
  }
  .title {
    background-color: #ca0131;
    /deep/ .van-icon {
      color: #fff;
    }
    /deep/.van-nav-bar__title {
      color: #fff;
    }
  }
  .main {
    padding: 15px;
    margin-bottom: 75px;
    .arttitle {
      padding: 10px 0;
      line-height: 20px;
      font-size: 16px;
      font-weight: 800;
    }
    .userInfo {
      padding: 15px 0;
      img {
        float: left;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .name {
        padding-top: 5px;
        font-size: 14px;
      }
      .time {
        font-size: 12px;
        color: #b4b4bd;
      }
    }
    .data {
      font-size: 16px;
      padding: 15px 0;
      /deep/ img {
        width: 100%;
      }
    }
    .comments {
      font-size: 16px;
      .commentTitle {
        padding: 15px 0;
        sup {
          color: #b4b4bd;
        }
      }
    }
  }
  /* 操作 */
  .operation {
    // 加红
    .red {
      color: red !important;
      .iconfont {
        color: red !important;
      }
    }
    background-color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 75px;
    display: flex;
    padding: 8px 15px;
    .btn {
      flex: 1;
      height: 35px;
      background-color: #f7f4f5;
      line-height: 35px;
      font-size: 14px;
      color: #b4b4bd;
      padding: 0 10px;
      border-radius: 10px;
    }
    .box {
      width: 28px;
      margin-left: 25px;
      font-size: 14px;
      text-align: center;
      color: #777475;
      /deep/.iconfont {
        font-size: 20px;
        color: #777475;
      }
    }
  }
  /* 弹出框 */
  // .comBox {
  //   padding: 15px;
  //   text-align: right;
  //   textarea {
  //     width: 100% !important;
  //     background-color: #f7f4f5;
  //     margin-top: 15px;
  //     padding: 15px;
  //     border: none;
  //     resize: none;
  //     font-size: 14px;
  //   }
  //   span {
  //     font-size: 16px;
  //     color: red;
  //   }
  //   .disable {
  //     color: #b4b4bd;
  //   }
  // }
}
</style>
